<template>
  <div class="calendar-head">
    <div class="mode" @click="changeMode">{{modeDisplay}}</div>
    <div class="oper">
      <Icon name="arrow_up" @click="changeDate(false)" />
      <Icon name="arrow_down" @click="changeDate(true)" />
    </div>
  </div>
</template>

<script>
import { inject, computed } from 'vue'
import Icon from '@/components/Icon'
import dayjs from 'dayjs'
export default {
  name: 'calendarHead',
  components: { Icon },
  setup () {
    const currentDate = inject('currentDate')
    const setDate = inject('setDate')
    const mode = inject('currentMode')
    const setMode = inject('setMode')
    const modeDisplay = computed(() => {
      switch(mode.value) {
        case 'day':
          return currentDate.value.format('YYYY年MM月')
        case 'month':
          return currentDate.value.format('YYYY年')
        case 'year':
          return ''
      }
    })
    const changeMode = () => {
      switch(mode.value) {
        case 'day':
          setMode('month')
          break
        case 'month':
          setMode('year')
          break
      }
    }
    const changeDate = (isNext) => {
      let type = 'month'
      if (mode.value === 'month') {
        type = 'year'
      }
      if (isNext) {
        setDate(dayjs(currentDate.value).add(1, type))
      } else {
        setDate(dayjs(currentDate.value).subtract(1, type))
      }
    }
    return {
      modeDisplay,
      changeDate,
      changeMode
    }
  }
}
</script>

<style lang="less" scoped>
.calendar-head {
  height: 20px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  .oper {
    width: 100px;
    display: flex;
    justify-content: space-around;
    svg {
      cursor: pointer;
    }
  }
}
</style>